<template>
  <div
    class="swiper-container"
    :style="{ height: height + 'px', width: width + 'px' }"
    ref="swiper-container"
  >
    <div class="swiper-wrapper">
      <!-- 插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper";
export default {
  props: {
    perview: {
      type: Number,
      default: 1,
    },
    height: {
      type: Number,
      default: 150,
    },
    width: {
      type: Number,
      default: 345,
    },
    loop: null,
    autoplay: null,
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      var mySwiper = new Swiper(this.$refs["swiper-container"], {
        slidesPerView: this.perview,
        loop: this.loop,
        autoplay: this.autoplay,
      });
    });
  },
};
</script>

<style lang="scss" scoped>
</style>
